﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Areas/Admin/Views/Shared/_Admin.cshtml";
}

<div class="page-content">
    <div class="table-header">ORDER LIST </div>
    <!--/.page-header-->

    <div class="row-fluid">
        <div class="span12">
            <!--PAGE CONTENT BEGINS-->

            <div class="row-fluid">
                <div class="span12">
                    <table id="sample-table-1" class="table table-striped table-bordered table-hover">
                        <div class="row-fluid">
                            <div class="span6">
                                <div class="dataTables_length" id="sample-table-2_length">
                                    <label>
                                        Display
                                                <select aria-controls="sample-table-2" size="1" name="sample-table-2_length">
                                                    <option selected="selected" value="10">10</option>
                                                    <option value="25">25</option>
                                                    <option value="50">50</option>
                                                    <option value="100">100</option>
                                                </select>
                                        records</label>
                                </div>
                            </div>
                            <div class="span6">
                                <div id="sample-table-2_filter" class="dataTables_filter">
                                    <label>
                                        Search:
                                                <input aria-controls="sample-table-2" type="text"></label>
                                </div>
                            </div>
                        </div>
                        <thead>
                            <tr>
                                <th class="center">
                                    <label>
                                        <input type="checkbox">
                                        <span class="lbl"></span>
                                    </label>
                                </th>
                                <th class="hidden-480">Order ID</th>
                                <th class="hidden-480">User ID</th>
                                <th class="hidden-480">Order date</th>
                                <th class="hidden-480">Value</th>
                                <th class="hidden-480">DeliveryAddress</th>
                                <th class="hidden-480">TrackingId</th>
                                <th class="hidden-480">PaymentMethod</th>
                                <th class="hidden-480">OrderStatus</th>
                                <th class="hidden-480">Note</th>
                            </tr>
                        </thead>

                        <tbody>
                            <tr>
                                <td class="center">
                                    <label>
                                        <input type="checkbox">
                                        <span class="lbl"></span>
                                    </label>
                                </td>

                                <td class="hidden-480">2</td>
                                <td class="hidden-480">1</td>
                                <td class="hidden-480">2013-12-29</td>
                                <td class="hidden-480">2319000.00</td>
                                <td class="hidden-480">47 Lạc Long Quân, Q11, TpHCM</td>
                                <td class="hidden-480"></td>
                                <td class="hidden-480">2</td>
                                <td class="hidden-480">1</td>
                                <td class="hidden-480">Giao hàng sau 5h chiều</td>

                                <td>
                                    <div class="hidden-phone visible-desktop btn-group">
                                        <button class="btn btn-mini btn-success">
                                            <i class="icon-ok bigger-120"></i>
                                        </button>

                                        <button class="btn btn-mini btn-info">
                                            <i class="icon-edit bigger-120"></i>
                                        </button>

                                        <button class="btn btn-mini btn-danger">
                                            <i class="icon-trash bigger-120"></i>
                                        </button>

                                        <button class="btn btn-mini btn-warning">
                                            <i class="icon-flag bigger-120"></i>
                                        </button>
                                    </div>

                                    <div class="hidden-desktop visible-phone">
                                        <div class="inline position-relative">
                                            <button class="btn btn-minier btn-primary dropdown-toggle" data-toggle="dropdown">
                                                <i class="icon-cog icon-only bigger-110"></i>
                                            </button>

                                            <ul class="dropdown-menu dropdown-icon-only dropdown-yellow pull-right dropdown-caret dropdown-close">
                                                <li>
                                                    <a data-original-title="View" href="#" class="tooltip-info" data-rel="tooltip" title="">
                                                        <span class="blue">
                                                            <i class="icon-zoom-in bigger-120"></i>
                                                        </span>
                                                    </a>
                                                </li>

                                                <li>
                                                    <a data-original-title="Edit" href="#" class="tooltip-success" data-rel="tooltip" title="">
                                                        <span class="green">
                                                            <i class="icon-edit bigger-120"></i>
                                                        </span>
                                                    </a>
                                                </li>

                                                <li>
                                                    <a data-original-title="Delete" href="#" class="tooltip-error" data-rel="tooltip" title="">
                                                        <span class="red">
                                                            <i class="icon-trash bigger-120"></i>
                                                        </span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </td>
                            </tr>

                            <tr>
                                <td class="center">
                                    <label>
                                        <input type="checkbox">
                                        <span class="lbl"></span>
                                    </label>
                                </td>

                                <td class="hidden-480">3</td>
                                <td class="hidden-480">3</td>
                                <td class="hidden-480">2013-12-31</td>
                                <td class="hidden-480">1461000.00</td>
                                <td class="hidden-480">16/5 Tân Hóa, Q11, TpHCM</td>
                                <td class="hidden-480"></td>
                                <td class="hidden-480">2</td>
                                <td class="hidden-480">1</td>
                                <td class="hidden-480"></td>

                                <td>
                                    <div class="hidden-phone visible-desktop btn-group">
                                        <button class="btn btn-mini btn-success">
                                            <i class="icon-ok bigger-120"></i>
                                        </button>

                                        <button class="btn btn-mini btn-info">
                                            <i class="icon-edit bigger-120"></i>
                                        </button>

                                        <button class="btn btn-mini btn-danger">
                                            <i class="icon-trash bigger-120"></i>
                                        </button>

                                        <button class="btn btn-mini btn-warning">
                                            <i class="icon-flag bigger-120"></i>
                                        </button>
                                    </div>

                                    <div class="hidden-desktop visible-phone">
                                        <div class="inline position-relative">
                                            <button class="btn btn-minier btn-primary dropdown-toggle" data-toggle="dropdown">
                                                <i class="icon-cog icon-only bigger-110"></i>
                                            </button>

                                            <ul class="dropdown-menu dropdown-icon-only dropdown-yellow pull-right dropdown-caret dropdown-close">
                                                <li>
                                                    <a data-original-title="View" href="#" class="tooltip-info" data-rel="tooltip" title="">
                                                        <span class="blue">
                                                            <i class="icon-zoom-in bigger-120"></i>
                                                        </span>
                                                    </a>
                                                </li>

                                                <li>
                                                    <a data-original-title="Edit" href="#" class="tooltip-success" data-rel="tooltip" title="">
                                                        <span class="green">
                                                            <i class="icon-edit bigger-120"></i>
                                                        </span>
                                                    </a>
                                                </li>

                                                <li>
                                                    <a data-original-title="Delete" href="#" class="tooltip-error" data-rel="tooltip" title="">
                                                        <span class="red">
                                                            <i class="icon-trash bigger-120"></i>
                                                        </span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </td>
                            </tr>

                            <tr>
                                <td class="center">
                                    <label>
                                        <input type="checkbox">
                                        <span class="lbl"></span>
                                    </label>
                                </td>

                                <td class="hidden-480">4</td>
                                <td class="hidden-480">4</td>
                                <td class="hidden-480">2013-12-31</td>
                                <td class="hidden-480">2837000.00</td>
                                <td class="hidden-480">227 Nguyễn Văn Cừ, Q5, TpHCM</td>
                                <td class="hidden-480"></td>
                                <td class="hidden-480">2</td>
                                <td class="hidden-480">2</td>
                                <td class="hidden-480">Giao hàng ngày chủ nhật</td>

                                <td>
                                    <div class="hidden-phone visible-desktop btn-group">
                                        <button class="btn btn-mini btn-success">
                                            <i class="icon-ok bigger-120"></i>
                                        </button>

                                        <button class="btn btn-mini btn-info">
                                            <i class="icon-edit bigger-120"></i>
                                        </button>

                                        <button class="btn btn-mini btn-danger">
                                            <i class="icon-trash bigger-120"></i>
                                        </button>

                                        <button class="btn btn-mini btn-warning">
                                            <i class="icon-flag bigger-120"></i>
                                        </button>
                                    </div>

                                    <div class="hidden-desktop visible-phone">
                                        <div class="inline position-relative">
                                            <button class="btn btn-minier btn-primary dropdown-toggle" data-toggle="dropdown">
                                                <i class="icon-cog icon-only bigger-110"></i>
                                            </button>

                                            <ul class="dropdown-menu dropdown-icon-only dropdown-yellow pull-right dropdown-caret dropdown-close">
                                                <li>
                                                    <a data-original-title="View" href="#" class="tooltip-info" data-rel="tooltip" title="">
                                                        <span class="blue">
                                                            <i class="icon-zoom-in bigger-120"></i>
                                                        </span>
                                                    </a>
                                                </li>

                                                <li>
                                                    <a data-original-title="Edit" href="#" class="tooltip-success" data-rel="tooltip" title="">
                                                        <span class="green">
                                                            <i class="icon-edit bigger-120"></i>
                                                        </span>
                                                    </a>
                                                </li>

                                                <li>
                                                    <a data-original-title="Delete" href="#" class="tooltip-error" data-rel="tooltip" title="">
                                                        <span class="red">
                                                            <i class="icon-trash bigger-120"></i>
                                                        </span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </td>
                            </tr>

                            <tr>
                                <td class="center">
                                    <label>
                                        <input type="checkbox">
                                        <span class="lbl"></span>
                                    </label>
                                </td>

                                <td class="hidden-480">5</td>
                                <td class="hidden-480">5</td>
                                <td class="hidden-480">2013-12-31</td>
                                <td class="hidden-480">3879000.00</td>
                                <td class="hidden-480">17 Tân Hóa, Q11, TpHCM</td>
                                <td class="hidden-480"></td>
                                <td class="hidden-480">2</td>
                                <td class="hidden-480">2</td>
                                <td class="hidden-480"></td>

                                <td>
                                    <div class="hidden-phone visible-desktop btn-group">
                                        <button class="btn btn-mini btn-success">
                                            <i class="icon-ok bigger-120"></i>
                                        </button>

                                        <button class="btn btn-mini btn-info">
                                            <i class="icon-edit bigger-120"></i>
                                        </button>

                                        <button class="btn btn-mini btn-danger">
                                            <i class="icon-trash bigger-120"></i>
                                        </button>

                                        <button class="btn btn-mini btn-warning">
                                            <i class="icon-flag bigger-120"></i>
                                        </button>
                                    </div>

                                    <div class="hidden-desktop visible-phone">
                                        <div class="inline position-relative">
                                            <button class="btn btn-minier btn-primary dropdown-toggle" data-toggle="dropdown">
                                                <i class="icon-cog icon-only bigger-110"></i>
                                            </button>

                                            <ul class="dropdown-menu dropdown-icon-only dropdown-yellow pull-right dropdown-caret dropdown-close">
                                                <li>
                                                    <a data-original-title="View" href="#" class="tooltip-info" data-rel="tooltip" title="">
                                                        <span class="blue">
                                                            <i class="icon-zoom-in bigger-120"></i>
                                                        </span>
                                                    </a>
                                                </li>

                                                <li>
                                                    <a data-original-title="Edit" href="#" class="tooltip-success" data-rel="tooltip" title="">
                                                        <span class="green">
                                                            <i class="icon-edit bigger-120"></i>
                                                        </span>
                                                    </a>
                                                </li>

                                                <li>
                                                    <a data-original-title="Delete" href="#" class="tooltip-error" data-rel="tooltip" title="">
                                                        <span class="red">
                                                            <i class="icon-trash bigger-120"></i>
                                                        </span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </td>
                            </tr>

                            <tr>
                                <td class="center">
                                    <label>
                                        <input type="checkbox">
                                        <span class="lbl"></span>
                                    </label>
                                </td>

                                <td class="hidden-480">6</td>
                                <td class="hidden-480">7</td>
                                <td class="hidden-480">2014-01-01</td>
                                <td class="hidden-480">1477000.00</td>
                                <td class="hidden-480">22/66 Đất Mới, Bình Tân, TpHCM</td>
                                <td class="hidden-480"></td>
                                <td class="hidden-480">2</td>
                                <td class="hidden-480">2</td>
                                <td class="hidden-480">Gọi điện trước khi đến giao hàng</td>

                                <td>
                                    <div class="hidden-phone visible-desktop btn-group">
                                        <button class="btn btn-mini btn-success">
                                            <i class="icon-ok bigger-120"></i>
                                        </button>

                                        <button class="btn btn-mini btn-info">
                                            <i class="icon-edit bigger-120"></i>
                                        </button>

                                        <button class="btn btn-mini btn-danger">
                                            <i class="icon-trash bigger-120"></i>
                                        </button>

                                        <button class="btn btn-mini btn-warning">
                                            <i class="icon-flag bigger-120"></i>
                                        </button>
                                    </div>

                                    <div class="hidden-desktop visible-phone">
                                        <div class="inline position-relative">
                                            <button class="btn btn-minier btn-primary dropdown-toggle" data-toggle="dropdown">
                                                <i class="icon-cog icon-only bigger-110"></i>
                                            </button>

                                            <ul class="dropdown-menu dropdown-icon-only dropdown-yellow pull-right dropdown-caret dropdown-close">
                                                <li>
                                                    <a data-original-title="View" href="#" class="tooltip-info" data-rel="tooltip" title="">
                                                        <span class="blue">
                                                            <i class="icon-zoom-in bigger-120"></i>
                                                        </span>
                                                    </a>
                                                </li>

                                                <li>
                                                    <a data-original-title="Edit" href="#" class="tooltip-success" data-rel="tooltip" title="">
                                                        <span class="green">
                                                            <i class="icon-edit bigger-120"></i>
                                                        </span>
                                                    </a>
                                                </li>

                                                <li>
                                                    <a data-original-title="Delete" href="#" class="tooltip-error" data-rel="tooltip" title="">
                                                        <span class="red">
                                                            <i class="icon-trash bigger-120"></i>
                                                        </span>
                                                    </a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="row-fluid">
                        <div class="span6">
                            <div id="sample-table-2_info" class="dataTables_info">Showing 1 to 10 of 23 entries</div>
                        </div>
                        <div class="span6">
                            <div class="dataTables_paginate paging_bootstrap pagination">
                                <ul>
                                    <li class="prev disabled"><a href="#"><i class="icon-double-angle-left"></i></a></li>
                                    <li class="active"><a href="#">1</a></li>
                                    <li><a href="#">2</a></li>
                                    <li><a href="#">3</a></li>
                                    <li class="next"><a href="#"><i class="icon-double-angle-right"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!--/span-->
            </div>
            <!--/row-->

            <div class="row-fluid">
                @*<h3 class="header smaller lighter blue">jQuery dataTables</h3>*@
                <div class="table-header">
                    ORDER DETAIL
							
                </div>

                <div id="sample-table-2_wrapper" class="dataTables_wrapper" role="grid">
                    <div class="row-fluid">
                        <div class="span6">
                            <div class="dataTables_length" id="sample-table-2_length">
                                <label>
                                    Display
                                                <select aria-controls="sample-table-2" size="1" name="sample-table-2_length">
                                                    <option selected="selected" value="10">10</option>
                                                    <option value="25">25</option>
                                                    <option value="50">50</option>
                                                    <option value="100">100</option>
                                                </select>
                                    records</label>
                            </div>
                        </div>
                        <div class="span6">
                            <div id="sample-table-2_filter" class="dataTables_filter">
                                <label>
                                    Search:
                                                <input aria-controls="sample-table-2" type="text"></label>
                            </div>
                        </div>
                    </div>
                    <table aria-describedby="sample-table-2_info" id="sample-table-2" class="table table-striped table-bordered table-hover dataTable">
                        <thead>
                            <tr role="row">
                                <th aria-label="" style="width: 57px;" colspan="1" rowspan="1" role="columnheader" class="center sorting_disabled">
                                    <label>
                                        <input type="checkbox">
                                        <span class="lbl"></span>
                                    </label>
                                </th>
                                <th aria-label="Domain: activate to sort column ascending" style="width: 168px;" colspan="1" rowspan="1" aria-controls="sample-table-2" tabindex="0" role="columnheader" class="sorting">Order Detail ID</th>
                                <th aria-label="Price: activate to sort column ascending" style="width: 121px;" colspan="1" rowspan="1" aria-controls="sample-table-2" tabindex="0" role="columnheader" class="sorting">Order ID</th>
                                <th aria-label="Clicks: activate to sort column ascending" style="width: 133px;" colspan="1" rowspan="1" aria-controls="sample-table-2" tabindex="0" role="columnheader" class="hidden-480 sorting">Product ID</th>
                                <th aria-label="Update: activate to sort column ascending" style="width: 197px;" colspan="1" rowspan="1" aria-controls="sample-table-2" tabindex="0" role="columnheader" class="hidden-phone sorting">Quantity</th>
                                <th aria-label="Status: activate to sort column ascending" style="width: 164px;" colspan="1" rowspan="1" aria-controls="sample-table-2" tabindex="0" role="columnheader" class="hidden-480 sorting">Price</th>
                                <th aria-label="Price: activate to sort column ascending" style="width: 121px;" colspan="1" rowspan="1" aria-controls="sample-table-2" tabindex="0" role="columnheader" class="sorting">Sale Off</th>
                                <th aria-label="Price: activate to sort column ascending" style="width: 121px;" colspan="1" rowspan="1" aria-controls="sample-table-2" tabindex="0" role="columnheader" class="sorting">Note</th>
                            </tr>
                        </thead>


                        <tbody aria-relevant="all" aria-live="polite" role="alert">
                            <tr class="odd">
                                <td class="center  sorting_1">
                                    <label>
                                        <input type="checkbox">
                                        <span class="lbl"></span>
                                    </label>
                                </td>
                                <td class="hidden-480 ">2</td>
                                <td class="hidden-480 ">2</td>
                                <td class="hidden-480 ">SP01</td>
                                <td class="hidden-480 ">1</td>
                                <td class="hidden-480 ">399000.00</td>
                                <td class="hidden-480 "></td>
                                <td class="hidden-480 "></td>

                            </tr>
                            <tr class="even">
                                <td class="center  sorting_1">
                                    <label>
                                        <input type="checkbox">
                                        <span class="lbl"></span>
                                    </label>
                                </td>

                                <td class="hidden-480 ">3</td>
                                <td class="hidden-480 ">2</td>
                                <td class="hidden-480 ">SP05</td>
                                <td class="hidden-480 ">1</td>
                                <td class="hidden-480 ">1640000.00</td>
                                <td class="hidden-480 "></td>
                                <td class="hidden-480 "></td>

                            </tr>
                            <tr class="odd">
                                <td class="center  sorting_1">
                                    <label>
                                        <input type="checkbox">
                                        <span class="lbl"></span>
                                    </label>
                                </td>
                                <td class="hidden-480 ">4</td>
                                <td class="hidden-480 ">2</td>
                                <td class="hidden-480 ">SP02</td>
                                <td class="hidden-480 ">1</td>
                                <td class="hidden-480 ">280000.00</td>
                                <td class="hidden-480 "></td>
                                <td class="hidden-480 "></td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="row-fluid">
                        <div class="span6">
                            <div id="sample-table-2_info" class="dataTables_info">Showing 1 to 10 of 23 entries</div>
                        </div>
                        <div class="span6">
                            <div class="dataTables_paginate paging_bootstrap pagination">
                                <ul>
                                    <li class="prev disabled"><a href="#"><i class="icon-double-angle-left"></i></a></li>
                                    <li class="active"><a href="#">1</a></li>
                                    <li><a href="#">2</a></li>
                                    <li><a href="#">3</a></li>
                                    <li class="next"><a href="#"><i class="icon-double-angle-right"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div id="modal-table" class="modal hide fade" tabindex="-1">
                <div class="modal-header no-padding">
                    <div class="table-header">
                        <button type="button" class="close" data-dismiss="modal">×</button>
                        Results for "Latest Registered Domains"
								
                    </div>
                </div>

                <div class="modal-body no-padding">
                    <div class="row-fluid">
                        <table class="table table-striped table-bordered table-hover no-margin-bottom no-border-top">
                            <thead>
                                <tr>
                                    <th>Domain</th>
                                    <th>Price</th>
                                    <th>Clicks</th>

                                    <th>
                                        <i class="icon-time bigger-110"></i>
                                        Update
                                    </th>
                                </tr>
                            </thead>

                            <tbody>
                                <tr>
                                    <td>
                                        <a href="#">ace.com</a>
                                    </td>
                                    <td>$45</td>
                                    <td>3,330</td>
                                    <td>Feb 12</td>
                                </tr>

                                <tr>
                                    <td>
                                        <a href="#">base.com</a>
                                    </td>
                                    <td>$35</td>
                                    <td>2,595</td>
                                    <td>Feb 18</td>
                                </tr>

                                <tr>
                                    <td>
                                        <a href="#">max.com</a>
                                    </td>
                                    <td>$60</td>
                                    <td>4,400</td>
                                    <td>Mar 11</td>
                                </tr>

                                <tr>
                                    <td>
                                        <a href="#">best.com</a>
                                    </td>
                                    <td>$75</td>
                                    <td>6,500</td>
                                    <td>Apr 03</td>
                                </tr>

                                <tr>
                                    <td>
                                        <a href="#">pro.com</a>
                                    </td>
                                    <td>$55</td>
                                    <td>4,250</td>
                                    <td>Jan 21</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="modal-footer">
                    <button class="btn btn-small btn-danger pull-left" data-dismiss="modal">
                        <i class="icon-remove"></i>
                        Close
								
                    </button>

                    <div class="pagination pull-right no-margin">
                        <ul>
                            <li class="prev disabled">
                                <a href="#">
                                    <i class="icon-double-angle-left"></i>
                                </a>
                            </li>

                            <li class="active">
                                <a href="#">1</a>
                            </li>

                            <li>
                                <a href="#">2</a>
                            </li>

                            <li>
                                <a href="#">3</a>
                            </li>

                            <li class="next">
                                <a href="#">
                                    <i class="icon-double-angle-right"></i>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!--PAGE CONTENT ENDS-->
        </div>
        <!--/.span-->
    </div>
    <!--/.row-fluid-->
